<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">详情</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">房屋信息</div>
            <div class="detailcontent">
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <div class="detailitem">管房单位：{{ projectdetail.gfdw }}</div>
                <div class="detailitem">档案编号：{{ projectdetail.dabh }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                <div class="detailitem">房屋结构：{{ projectdetail.fwjg }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">建筑形式：{{ projectdetail.jzxs }}</div>
                <div class="detailitem"></div>
                <!-- <div class="detailitem">风貌建筑：{{ projectdetail.fmjz }}</div>
                <div class="detailitem" v-if="projectdetail.fmjz == '是'">风貌建筑保护等级：{{ projectdetail.fmjzjb }}</div>
                <div class="detailitem">文物保护单位：{{ projectdetail.wwbh }}</div>
                <div class="detailitem" v-if="projectdetail.wwbh == '是'">文物保护单位级别 ：{{ projectdetail.wwbhjb }}</div> -->
            </div>
            <div class="addtitle" style="margin-top: 30px">房屋配套信息</div>
            <el-tabs v-model="activeName1" @tab-click="handleClick1">
                <el-tab-pane label="水" name="first">
                    <div style="margin-bottom: 10px">
                        <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入内容"
                            v-model="lzshbput.shb"
                            style="width: 800px"
                            :readonly="lzsbshow"
                        ></el-input>
                        <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!lzsbshow" @click="lzsbshow = false"
                            >修改</el-button
                        >
                        <el-button size="small" type="primary" @click="submitht('lzsbshow', 'lzshbput','lzptxx')" :disabled="lzsbshow"
                            >保存</el-button
                        >
                    </div>
                    <div style="overflow: hidden" class="fwjgstyle">
                        <el-upload
                            class="upload-demo"
                            :action="httpUrl + '/file/uploadFile'"
                            :on-remove="handleRemoves"
                            :before-remove="beforeRemoves"
                            multiple
                            :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 1)"
                            :headers="myHeaders"
                            :file-list="fileList"
                            ref="upload1"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                            </div>
                        </el-upload>
                        <el-table :data="lzsbtableData" style="width: 100%; margin: 10px auto 10px" border>
                            <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                            <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <router-link
                                        target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                        style="color: #008a94"
                                        v-if="
                                            scope.row.fj[0].suffix == '.docx' ||
                                            scope.row.fj[0].suffix == '.doc' ||
                                            scope.row.fj[0].suffix == '.xls' ||
                                            scope.row.fj[0].suffix == '.xlsx'
                                        "
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        v-else
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                    ></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        style="color: blue; text-decoration: underline"
                                        >{{ scope.row.wjmc }}</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="cjsj" label="上传时间" align="center">
                                <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                            </el-table-column>

                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id,'lzpzxx')" style="color: red"
                                        >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="电" name="second">
                    <div style="margin-bottom: 10px">
                        <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入内容"
                            v-model="lzdbput.db"
                            style="width: 800px"
                            :readonly="lzdbshow"
                        ></el-input>
                        <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!lzdbshow" @click="lzdbshow = false"
                            >修改</el-button
                        >
                        <el-button size="small" type="primary" @click="submitht('lzdbshow', 'lzdbput','lzptxx')" :disabled="lzdbshow"
                            >保存</el-button
                        >
                    </div>
                    <div style="overflow: hidden" class="fwjgstyle">
                        <el-upload
                            class="upload-demo"
                            :action="httpUrl + '/file/uploadFile'"
                            :on-remove="handleRemoves"
                            :before-remove="beforeRemoves"
                            multiple
                            :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 2)"
                            :headers="myHeaders"
                            :file-list="fileList"
                            ref="upload2"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                            </div>
                        </el-upload>
                        <el-table :data="lzdbtableData" style="width: 100%; margin: 10px auto 10px" border>
                            <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                            <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <router-link
                                        target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                        style="color: #008a94"
                                        v-if="
                                            scope.row.fj[0].suffix == '.docx' ||
                                            scope.row.fj[0].suffix == '.doc' ||
                                            scope.row.fj[0].suffix == '.xls' ||
                                            scope.row.fj[0].suffix == '.xlsx'
                                        "
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        v-else
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                    ></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        style="color: blue; text-decoration: underline"
                                        >{{ scope.row.wjmc }}</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="cjsj" label="上传时间" align="center">
                                <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id,'lzpzxx')" style="color: red"
                                        >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="燃气" name="third">
                    <div style="margin-bottom: 10px">
                        <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入内容"
                            v-model="lzrqbput.rqb"
                            style="width: 800px"
                            :readonly="lzrqbshow"
                        ></el-input>
                        <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!lzrqbshow" @click="lzrqbshow = false"
                            >修改</el-button
                        >
                        <el-button size="small" type="primary" @click="submitht('lzrqbshow', 'lzrqbput','lzptxx')" :disabled="lzrqbshow"
                            >保存</el-button
                        >
                    </div>
                    <div style="overflow: hidden" class="fwjgstyle">
                        <el-upload
                            class="upload-demo"
                            :action="httpUrl + '/file/uploadFile'"
                            :on-remove="handleRemoves"
                            :before-remove="beforeRemoves"
                            multiple
                            :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 3)"
                            :headers="myHeaders"
                            :file-list="fileList"
                            ref="upload3"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                            </div>
                        </el-upload>
                        <el-table :data="lzrqtableData" style="width: 100%; margin: 10px auto 10px" border>
                            <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                            <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <router-link
                                        target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                        style="color: #008a94"
                                        v-if="
                                            scope.row.fj[0].suffix == '.docx' ||
                                            scope.row.fj[0].suffix == '.doc' ||
                                            scope.row.fj[0].suffix == '.xls' ||
                                            scope.row.fj[0].suffix == '.xlsx'
                                        "
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        v-else
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                    ></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        style="color: blue; text-decoration: underline"
                                        >{{ scope.row.wjmc }}</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="cjsj" label="上传时间" align="center">
                                <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id,'lzpzxx')" style="color: red"
                                        >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="供热" name="fourth">
                    <div style="margin-bottom: 10px">
                        <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入内容"
                            v-model="lzndgrfput.ndgrf"
                            style="width: 800px"
                            :readonly="lzndgrfshow"
                        ></el-input>
                        <el-button
                            size="small"
                            type="primary"
                            style="margin-left: 20px"
                            :disabled="!lzndgrfshow"
                            @click="lzndgrfshow = false"
                            >修改</el-button
                        >
                        <el-button size="small" type="primary" @click="submitht('lzndgrfshow', 'lzndgrfput','lzptxx')" :disabled="lzndgrfshow"
                            >保存</el-button
                        >
                    </div>
                    <div style="overflow: hidden" class="fwjgstyle">
                        <el-upload
                            class="upload-demo"
                            :action="httpUrl + '/file/uploadFile'"
                            :on-remove="handleRemoves"
                            :before-remove="beforeRemoves"
                            multiple
                            :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 4)"
                            :headers="myHeaders"
                            :file-list="fileList"
                            ref="upload4"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                            </div>
                        </el-upload>
                        <el-table :data="lzgrtableData" style="width: 100%; margin: 10px auto 10px" border>
                            <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                            <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <router-link
                                        target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                        style="color: #008a94"
                                        v-if="
                                            scope.row.fj[0].suffix == '.docx' ||
                                            scope.row.fj[0].suffix == '.doc' ||
                                            scope.row.fj[0].suffix == '.xls' ||
                                            scope.row.fj[0].suffix == '.xlsx'
                                        "
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        v-else
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                    ></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        style="color: blue; text-decoration: underline"
                                        >{{ scope.row.wjmc }}</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="cjsj" label="上传时间" align="center">
                                <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id,'lzpzxx')" style="color: red"
                                        >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="物业" name="fifth">
                    <div style="margin-bottom: 10px">
                        <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入内容"
                            v-model="lzwyfput.wyf"
                            style="width: 800px"
                            :readonly="lzwyshow"
                        ></el-input>
                        <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!lzwyshow" @click="lzwyshow = false"
                            >修改</el-button
                        >
                        <el-button size="small" type="primary" @click="submitht('lzwyshow', 'lzwyfput','lzptxx')" :disabled="lzwyshow"
                            >保存</el-button
                        >
                    </div>
                    <div style="overflow: hidden" class="fwjgstyle">
                        <el-upload
                            class="upload-demo"
                            :action="httpUrl + '/file/uploadFile'"
                            :on-remove="handleRemoves"
                            :before-remove="beforeRemoves"
                            multiple
                            :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 5)"
                            :headers="myHeaders"
                            :file-list="fileList"
                            ref="upload5"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                            </div>
                        </el-upload>
                        <el-table :data="lzwytableData" style="width: 100%; margin: 10px auto 10px" border>
                            <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                            <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <router-link
                                        target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                        style="color: #008a94"
                                        v-if="
                                            scope.row.fj[0].suffix == '.docx' ||
                                            scope.row.fj[0].suffix == '.doc' ||
                                            scope.row.fj[0].suffix == '.xls' ||
                                            scope.row.fj[0].suffix == '.xlsx'
                                        "
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        v-else
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                    ></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        style="color: blue; text-decoration: underline"
                                        >{{ scope.row.wjmc }}</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="cjsj" label="上传时间" align="center">
                                <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id,'lzpzxx')" style="color: red"
                                        >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="其他" name="sixth">
                    <div style="margin-bottom: 10px">
                        <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入内容"
                            v-model="lzqtptput.qtpt"
                            style="width: 800px"
                            :readonly="lzqtptshow"
                        ></el-input>
                        <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!lzqtptshow" @click="lzqtptshow = false"
                            >修改</el-button
                        >
                        <el-button size="small" type="primary" @click="submitht('lzqtptshow', 'lzqtptput','lzptxx')" :disabled="lzqtptshow"
                            >保存</el-button
                        >
                    </div>
                    <div style="overflow: hidden" class="fwjgstyle">
                        <el-upload
                            class="upload-demo"
                            :action="httpUrl + '/file/uploadFile'"
                            :on-remove="handleRemoves"
                            :before-remove="beforeRemoves"
                            multiple
                            :on-success="(response, file, fileList, filetype) => handleUpSuccess1(response, file, fileList, filetype, 6)"
                            :headers="myHeaders"
                            :file-list="fileList"
                            ref="upload6"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                            </div>
                        </el-upload>
                        <el-table :data="lzqtpttableData" style="width: 100%; margin: 10px auto 10px" border>
                            <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                            <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <router-link
                                        target="_blank"
                                        :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                        style="color: #008a94"
                                        v-if="
                                            scope.row.fj[0].suffix == '.docx' ||
                                            scope.row.fj[0].suffix == '.doc' ||
                                            scope.row.fj[0].suffix == '.xls' ||
                                            scope.row.fj[0].suffix == '.xlsx'
                                        "
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                    </router-link>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        v-else
                                        >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                    ></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                        style="color: blue; text-decoration: underline"
                                        >{{ scope.row.wjmc }}</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column prop="cjsj" label="上传时间" align="center">
                                <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.row.id,'lzpzxx')" style="color: red"
                                        >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div v-if="zlxxtable.length != 0">
                <div class="addtitle">合同信息</div>
                <el-table :data="zlxxtable" style="width: 100%" border>
                    <el-table-column prop="htbh" label="合同编号" align="center" fixed width="160"> </el-table-column>
                    <el-table-column prop="dabh" label="档案编号" align="center" width="240" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="fwdz" label="房屋地址" align="center" width="280" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="czr" label="承租单位" align="center" width="280"> </el-table-column>
                    <el-table-column prop="zjdj" :label="type=='2'?'租金单价':'月租金'" align="center"> </el-table-column>
                    <el-table-column prop="qdsj" label="签订时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.qdsj ? scope.row.qdsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="zlqssj" label="起租时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.zlqssj ? scope.row.zlqssj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="zldqsj" label="到期时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.zldqsj ? scope.row.zldqsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column> -->

                    <el-table-column label="操作" width="100" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="getptdetail(scope.row)">配套信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="zlxxtotal"
                        :current-page.sync="zlxxcurrent"
                        :page-size="pageSize"
                        @current-change="zlxxhandleCurrentChange"
                    >
                    </el-pagination>
                </div>
                <div class="addtitle" style="margin-top: 10px; overflow: hidden" v-if="qdshow">配套信息<span style="color: #008a94;">(档案编号：{{danganName}})</span></div>
                <el-tabs v-model="activeName" @tab-click="handleClick" v-if="qdshow">
                    <el-tab-pane label="水" name="first">
                        <div style="margin-bottom: 10px">
                            <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入内容"
                                v-model="shbput.shb"
                                style="width: 800px"
                                :readonly="sbshow"
                            ></el-input>
                            <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!sbshow" @click="sbshow = false"
                                >修改</el-button
                            >
                            <el-button size="small" type="primary" @click="submitht('sbshow', 'shbput','ptxx')" :disabled="sbshow">保存</el-button>
                        </div>
                        <div style="overflow: hidden" class="fwjgstyle">
                            <el-upload
                                class="upload-demo"
                                :action="httpUrl + '/file/uploadFile'"
                                :on-remove="handleRemoves"
                                :before-remove="beforeRemoves"
                                multiple
                                :on-success="(response, file, fileList, filetype) => handleUpSuccess(response, file, fileList, filetype, 1)"
                                :headers="myHeaders"
                                :file-list="fileList"
                                ref="upload1"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                                </div>
                            </el-upload>
                            <el-table :data="sbtableData" style="width: 100%; margin: 10px auto 10px" border>
                                <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.fj[0].suffix == '.docx' ||
                                                scope.row.fj[0].suffix == '.doc' ||
                                                scope.row.fj[0].suffix == '.xls' ||
                                                scope.row.fj[0].suffix == '.xlsx'
                                            "
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.wjmc }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cjsj" label="上传时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                                </el-table-column>

                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click.native.prevent="deleteRow(scope.row.id,'pzxx')"
                                            style="color: red"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="电" name="second">
                        <div style="margin-bottom: 10px">
                            <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入内容"
                                v-model="dbput.db"
                                style="width: 800px"
                                :readonly="dbshow"
                            ></el-input>
                            <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!dbshow" @click="dbshow = false"
                                >修改</el-button
                            >
                            <el-button size="small" type="primary" @click="submitht('dbshow', 'dbput','ptxx')" :disabled="dbshow">保存</el-button>
                        </div>
                        <div style="overflow: hidden" class="fwjgstyle">
                            <el-upload
                                class="upload-demo"
                                :action="httpUrl + '/file/uploadFile'"
                                :on-remove="handleRemoves"
                                :before-remove="beforeRemoves"
                                multiple
                                :on-success="(response, file, fileList, filetype) => handleUpSuccess(response, file, fileList, filetype, 2)"
                                :headers="myHeaders"
                                :file-list="fileList"
                                ref="upload2"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                                </div>
                            </el-upload>
                            <el-table :data="dbtableData" style="width: 100%; margin: 10px auto 10px" border>
                                <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.fj[0].suffix == '.docx' ||
                                                scope.row.fj[0].suffix == '.doc' ||
                                                scope.row.fj[0].suffix == '.xls' ||
                                                scope.row.fj[0].suffix == '.xlsx'
                                            "
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.wjmc }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cjsj" label="上传时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click.native.prevent="deleteRow(scope.row.id,'pzxx')"
                                            style="color: red"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="燃气" name="third">
                        <div style="margin-bottom: 10px">
                            <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入内容"
                                v-model="rqbput.rqb"
                                style="width: 800px"
                                :readonly="rqbshow"
                            ></el-input>
                            <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!rqbshow" @click="rqbshow = false"
                                >修改</el-button
                            >
                            <el-button size="small" type="primary" @click="submitht('rqbshow', 'rqbput','ptxx')" :disabled="rqbshow"
                                >保存</el-button
                            >
                        </div>
                        <div style="overflow: hidden" class="fwjgstyle">
                            <el-upload
                                class="upload-demo"
                                :action="httpUrl + '/file/uploadFile'"
                                :on-remove="handleRemoves"
                                :before-remove="beforeRemoves"
                                multiple
                                :on-success="(response, file, fileList, filetype) => handleUpSuccess(response, file, fileList, filetype, 3)"
                                :headers="myHeaders"
                                :file-list="fileList"
                                ref="upload3"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                                </div>
                            </el-upload>
                            <el-table :data="rqtableData" style="width: 100%; margin: 10px auto 10px" border>
                                <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.fj[0].suffix == '.docx' ||
                                                scope.row.fj[0].suffix == '.doc' ||
                                                scope.row.fj[0].suffix == '.xls' ||
                                                scope.row.fj[0].suffix == '.xlsx'
                                            "
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.wjmc }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cjsj" label="上传时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click.native.prevent="deleteRow(scope.row.id,'pzxx')"
                                            style="color: red"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="供热" name="fourth">
                        <div style="margin-bottom: 10px">
                            <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入内容"
                                v-model="ndgrfput.ndgrf"
                                style="width: 800px"
                                :readonly="ndgrfshow"
                            ></el-input>
                            <el-button
                                size="small"
                                type="primary"
                                style="margin-left: 20px"
                                :disabled="!ndgrfshow"
                                @click="ndgrfshow = false"
                                >修改</el-button
                            >
                            <el-button size="small" type="primary" @click="submitht('ndgrfshow', 'ndgrfput','ptxx')" :disabled="ndgrfshow"
                                >保存</el-button
                            >
                        </div>
                        <div style="overflow: hidden" class="fwjgstyle">
                            <el-upload
                                class="upload-demo"
                                :action="httpUrl + '/file/uploadFile'"
                                :on-remove="handleRemoves"
                                :before-remove="beforeRemoves"
                                multiple
                                :on-success="(response, file, fileList, filetype) => handleUpSuccess(response, file, fileList, filetype, 4)"
                                :headers="myHeaders"
                                :file-list="fileList"
                                ref="upload4"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                                </div>
                            </el-upload>
                            <el-table :data="grtableData" style="width: 100%; margin: 10px auto 10px" border>
                                <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.fj[0].suffix == '.docx' ||
                                                scope.row.fj[0].suffix == '.doc' ||
                                                scope.row.fj[0].suffix == '.xls' ||
                                                scope.row.fj[0].suffix == '.xlsx'
                                            "
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.wjmc }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cjsj" label="上传时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click.native.prevent="deleteRow(scope.row.id,'pzxx')"
                                            style="color: red"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="物业" name="fifth">
                        <div style="margin-bottom: 10px">
                            <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入内容"
                                v-model="wyfput.wyf"
                                style="width: 800px"
                                :readonly="wyshow"
                            ></el-input>
                            <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!wyshow" @click="wyshow = false"
                                >修改</el-button
                            >
                            <el-button size="small" type="primary" @click="submitht('wyshow', 'wyfput','ptxx')" :disabled="wyshow">保存</el-button>
                        </div>
                        <div style="overflow: hidden" class="fwjgstyle">
                            <el-upload
                                class="upload-demo"
                                :action="httpUrl + '/file/uploadFile'"
                                :on-remove="handleRemoves"
                                :before-remove="beforeRemoves"
                                multiple
                                :on-success="(response, file, fileList, filetype) => handleUpSuccess(response, file, fileList, filetype, 5)"
                                :headers="myHeaders"
                                :file-list="fileList"
                                ref="upload5"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                                </div>
                            </el-upload>
                            <el-table :data="wytableData" style="width: 100%; margin: 10px auto 10px" border>
                                <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.fj[0].suffix == '.docx' ||
                                                scope.row.fj[0].suffix == '.doc' ||
                                                scope.row.fj[0].suffix == '.xls' ||
                                                scope.row.fj[0].suffix == '.xlsx'
                                            "
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.wjmc }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cjsj" label="上传时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click.native.prevent="deleteRow(scope.row.id,'pzxx')"
                                            style="color: red"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="其他" name="sixth">
                        <div style="margin-bottom: 10px">
                            <div style="color: red; font-size: 13px;margin-bottom: 10px;">*点击修改后填写内容</div>
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入内容"
                                v-model="wyfput.wyf"
                                style="width: 800px"
                                :readonly="qtptshow"
                            ></el-input>
                            <el-button size="small" type="primary" style="margin-left: 20px" :disabled="!qtptshow" @click="qtptshow = false"
                                >修改</el-button
                            >
                            <el-button size="small" type="primary" @click="submitht('qtptshow', 'qtptput','ptxx')" :disabled="qtptshow"
                                >保存</el-button
                            >
                        </div>
                        <div style="overflow: hidden" class="fwjgstyle">
                            <el-upload
                                class="upload-demo"
                                :action="httpUrl + '/file/uploadFile'"
                                :on-remove="handleRemoves"
                                :before-remove="beforeRemoves"
                                multiple
                                :on-success="(response, file, fileList, filetype) => handleUpSuccess(response, file, fileList, filetype, 6)"
                                :headers="myHeaders"
                                :file-list="fileList"
                                ref="upload6"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">
                                    <span style="color: red; font-size: 13px">*描述内容与图片内容请保持一致</span>
                                </div>
                            </el-upload>
                            <el-table :data="qtpttableData" style="width: 100%; margin: 10px auto 10px" border>
                                <el-table-column prop="wjmc" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <router-link
                                            target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008a94"
                                            v-if="
                                                scope.row.fj[0].suffix == '.docx' ||
                                                scope.row.fj[0].suffix == '.doc' ||
                                                scope.row.fj[0].suffix == '.xls' ||
                                                scope.row.fj[0].suffix == '.xlsx'
                                            "
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else
                                            >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                                        ></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color: blue; text-decoration: underline"
                                            >{{ scope.row.wjmc }}</el-button
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cjsj" label="上传时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}</template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="small"
                                            @click.native.prevent="deleteRow(scope.row.id,'pzxx')"
                                            style="color: red"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import {
    download,
    sbfjlist,
    sbfjadd,
    sbfjdelete,
    redownload,
    getsignlistupdate,
    htlistbybuildid,
    builddetail,
    buildedit
} from '@/api/index';
import global from '@/components/common/httpurl.vue';
import fileType from '../vo/filetype';
export default {
    name: 'fwjgfjdetail',
    data() {
        return {
            type: this.$store.getters.type,
            danganName:'',
            qdshow:false,
            activeName: 'first',
            activeName1: 'first',
            fileType: fileType,
            httpUrl: global.httpUrl, //公共地址
            sbtableData: [], //水表文件列表
            dbtableData: [], //电表文件列表
            rqtableData: [], //燃气文件列表
            grtableData: [], //供热文件列表
            wytableData: [], //物业文件列表
            qtpttableData: [], //其他文件列表
            // 楼幢文件列表
            lzsbtableData: [], //水表文件列表
            lzdbtableData: [], //电表文件列表
            lzrqtableData: [], //燃气文件列表
            lzgrtableData: [], //供热文件列表
            lzwytableData: [], //物业文件列表
            lzqtpttableData: [], //其他文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                token: '123'
            },
            form: {
                jmje: 0
            },
            fileList: [],
            tableData: [], //可编辑表格
            projectdetail: {}, //合同详情
            form: {},
            signid: '',
            // 文件列表传参
            sbform: {},
            dbform: {},
            rqform: {},
            grform: {},
            wyform: {},
            qtptform: {},
            // 合同备注传参
            shbput: {},
            dbput: {},
            rqbput: {},
            ndgrfput: {},
            wyfput: {},
            qtptput: {},
            sbshow: true, //水表显示
            dbshow: true, //电表显示
            rqbshow: true, //燃气表显示
            ndgrfshow: true, //供热显示
            wyshow: true, //物业显示
            qtptshow: true, //其他显示
            lzsbshow: true, //水表显示
            lzdbshow: true, //电表显示
            lzrqbshow: true, //燃气表显示
            lzndgrfshow: true, //供热显示
            lzwyshow: true, //物业显示
            lzqtptshow: true, //其他显示
            zlxxtable: [],
            zlxxtotal: 0,
            zlxxcurrent: 1,
            pageSize: 10,
            zlxxform: {
                relid: '',
                pageSize: 10,
                current: 1
            },
            // 文件列表传参
            lzsbform: {},
            lzdbform: {},
            lzrqform: {},
            lzgrform: {},
            lzwyform: {},
            lzqtptform: {},
            // 文件备注传参
            lzshbput: {}, //水表
            lzdbput: {}, //电表
            lzrqbput: {}, //燃气表
            lzndgrfput: {}, //供热
            lzwyfput: {}, //物业
            lzqtptput: {} //其他
        };
    },
    methods: {
        // 编辑楼幢
        buildedit(data) {
            buildedit(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('修改成功');
                } else {
                    this.$message.error('修改失败');
                }
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id);
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            download(data).then((res) => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                window.open(url, '_blank');
            });
        },
        // 返回
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(file);
            console.log('filetype', filetype);
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file);
            console.log(fileList);
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        async handleUpSuccess(response, file, fileLists, filetype, num) {
            console.log(fileLists);
            console.log('filetype', filetype);
            this.$message.success('导入成功');
            console.log(num);
            await fileLists.forEach((item) => {
                console.log(item.response.data);
                let data = {
                    wjmc: item.response.data.filename,
                    signid: this.signid,
                    fj: item.response.data.id,
                    wjlx: num
                };
                console.log(data);
                this.sbfjadd(data, 'pzxx');
            });
            this.$nextTick(() => {
                this.$refs['upload' + num].clearFiles();
            });
        },
        async handleUpSuccess1(response, file, fileLists, filetype, num) {
            console.log(fileLists);
            console.log('filetype', filetype);
            this.$message.success('导入成功');
            console.log(num);
            await fileLists.forEach((item) => {
                console.log(item.response.data);
                let data = {
                    wjmc: item.response.data.filename,
                    buildid: this.buildid,
                    fj: item.response.data.id,
                    wjlx: num
                };
                console.log(data);
                this.sbfjadd(data, 'lzpzxx');
            });
            this.$nextTick(() => {
                this.$refs['upload' + num].clearFiles();
            });
        },
        // 删除
        deleteRow(e,name) {
            console.log(e);
            this.$confirm('确定删除此文件吗？')
                .then(() => {
                    console.log(e);
                    let data = {
                        id: e
                    };
                    this.sbfjdelete(data,name);
                    this.$message.success('删除成功');
                })
                .catch(() => {
                    this.$message.error('删除取消');
                });
        },
        // 水表附件列表
        sbfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.sbtableData = res.data.records;
                } else {
                    this.sbtableData = [];
                }
            });
        },
        // 电表附件列表
        dbfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.dbtableData = res.data.records;
                } else {
                    this.dbtableData = [];
                }
            });
        },
        // 燃气附件列表
        rqfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.rqtableData = res.data.records;
                } else {
                    this.rqtableData = [];
                }
            });
        },
        // 供热附件列表
        grfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.grtableData = res.data.records;
                } else {
                    this.grtableData = [];
                }
            });
        },
        // 物业附件列表
        wyfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.wytableData = res.data.records;
                } else {
                    this.wytableData = [];
                }
            });
        },
        // 其他附件列表
        qtptfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.qtpttableData = res.data.records;
                } else {
                    this.qtpttableData = [];
                }
            });
        },

        // 楼幢的
        // 水表附件列表
        lzsbfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.lzsbtableData = res.data.records;
                } else {
                    this.lzsbtableData = [];
                }
            });
        },
        // 电表附件列表
        lzdbfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.lzdbtableData = res.data.records;
                } else {
                    this.lzdbtableData = [];
                }
            });
        },
        // 燃气附件列表
        lzrqfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.lzrqtableData = res.data.records;
                } else {
                    this.lzrqtableData = [];
                }
            });
        },
        // 供热附件列表
        lzgrfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.lzgrtableData = res.data.records;
                } else {
                    this.lzgrtableData = [];
                }
            });
        },
        // 物业附件列表
        lzwyfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.lzwytableData = res.data.records;
                } else {
                    this.lzwytableData = [];
                }
            });
        },
        // 其他附件列表
        lzqtptfjlist(data) {
            sbfjlist(data).then((res) => {
                if (res.code == 200) {
                    console.log(res.data);
                    this.lzqtpttableData = res.data.records;
                } else {
                    this.lzqtpttableData = [];
                }
            });
        },
        // 附件新增
        sbfjadd(data, name) {
            sbfjadd(data).then((res) => {
                console.log('上传文件！！');
                if (name == 'pzxx') {
                    this.sbfjlist(this.sbform);
                    this.dbfjlist(this.dbform);
                    this.rqfjlist(this.rqform);
                    this.grfjlist(this.grform);
                    this.wyfjlist(this.wyform);
                    this.qtptfjlist(this.qtptform);
                } else if (name == 'lzpzxx') {
                    this.lzsbfjlist(this.lzsbform);
                    this.lzdbfjlist(this.lzdbform);
                    this.lzrqfjlist(this.lzrqform);
                    this.lzgrfjlist(this.lzgrform);
                    this.lzwyfjlist(this.lzwyform);
                    this.lzqtptfjlist(this.lzqtptform);
                }
            });
        },
        // 附件删除
        sbfjdelete(data, name) {
            sbfjdelete(data).then((res) => {
                console.log('删除文件！！');
                if (name == 'pzxx') {
                    this.sbfjlist(this.sbform);
                    this.dbfjlist(this.dbform);
                    this.rqfjlist(this.rqform);
                    this.grfjlist(this.grform);
                    this.wyfjlist(this.wyform);
                    this.qtptfjlist(this.qtptform);
                } else if (name == 'lzpzxx') {
                    this.lzsbfjlist(this.lzsbform);
                    this.lzdbfjlist(this.lzdbform);
                    this.lzrqfjlist(this.lzrqform);
                    this.lzgrfjlist(this.lzgrform);
                    this.lzwyfjlist(this.lzwyform);
                    this.lzqtptfjlist(this.lzqtptform);
                }
            });
        },
        // 换页操作
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 楼幢换页操作
        handleClick1(tab, event) {
            console.log(tab, event);
        },
        // 合同修改
        submitht(name, form,silzname) {
            this[name] = !this[name];
            if(silzname=='ptxx'){
                this.getsignlistupdate(this[form]);
            }else if(silzname=='lzptxx'){
                this.buildedit(this[form]);
            }
            
        },
        //编辑数据接口
        getsignlistupdate(data) {
            getsignlistupdate(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('修改成功！！！');
                } else {
                    this.$message.error('修改失败！！！');
                }
            });
        },
        // 租赁信息列表
        htlistbybuildid(data) {
            htlistbybuildid(data).then((res) => {
                this.zlxxtable = res.data.records;
                this.zlxxtotal=res.data.total
            });
        },
        // 租赁信息换页
        zlxxhandleCurrentChange(val) {
            this.zlxxcurrent = val;
            this.zlxxform.current = val;
            this.htlistbybuildid(this.zlxxform);
            console.log(val);
        },
        // 获取配套信息
        getptdetail(data) {
            this.signid = data.id;
            this.danganName=data.dabh
            // 合同内容修改内容
            this.shbput = {
                id: data.id,
                shb: data.shb
            };
            this.dbput = {
                id: data.id,
                db: data.db
            };
            this.rqbput = {
                id: data.id,
                rqb: data.rqb
            };
            this.ndgrfput = {
                id: data.id,
                ndgrf: data.ndgrf
            };
            this.wyfput = {
                id: data.id,
                wyf: data.wyf
            };
            this.qtptput = {
                id: data.id,
                qtpt: data.qtpt
            };

            // 文件列表接口操作
            // 水表列表
            this.sbform = {
                signid: data.id,
                wjlx: 1
            };
            this.sbfjlist(this.sbform);
            // 电表列表
            this.dbform = {
                signid: data.id,
                wjlx: 2
            };
            this.dbfjlist(this.dbform);
            // 燃气表列表
            this.rqform = {
                signid: data.id,
                wjlx: 3
            };
            this.rqfjlist(this.rqform);
            // 供热列表
            this.grform = {
                signid: data.id,
                wjlx: 4
            };
            this.grfjlist(this.grform);
            // 物业列表
            this.wyform = {
                signid: data.id,
                wjlx: 5
            };
            this.wyfjlist(this.wyform);
            // 其他列表
            this.qtptform = {
                signid: data.id,
                wjlx: 6
            };
            this.qtptfjlist(this.qtptform);
            this.qdshow=true
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
                this.zlxxform.relid = this.projectdetail.id;
                this.htlistbybuildid(this.zlxxform);
                // 合同内容修改内容
                this.lzshbput = {
                    id: res.data.id,
                    shb: res.data.shb
                };
                this.lzdbput = {
                    id: res.data.id,
                    db: res.data.db
                };
                this.lzrqbput = {
                    id: res.data.id,
                    rqb: res.data.rqb
                };
                this.lzndgrfput = {
                    id: res.data.id,
                    ndgrf: res.data.ndgrf
                };
                this.lzwyfput = {
                    id: res.data.id,
                    wyf: res.data.wyf
                };
                this.lzqtptput = {
                    id: res.data.id,
                    qtpt: res.data.qtpt
                };

                // 文件列表接口操作
                // 水表列表
                this.lzsbform = {
                    buildid: res.data.id,
                    wjlx: 1
                };
                this.lzsbfjlist(this.lzsbform);
                // 电表列表
                this.lzdbform = {
                    buildid: res.data.id,
                    wjlx: 2
                };
                this.lzdbfjlist(this.lzdbform);
                // 燃气表列表
                this.lzrqform = {
                    buildid: res.data.id,
                    wjlx: 3
                };
                this.lzrqfjlist(this.lzrqform);
                // 供热列表
                this.lzgrform = {
                    buildid: res.data.id,
                    wjlx: 4
                };
                this.lzgrfjlist(this.lzgrform);
                // 物业列表
                this.lzwyform = {
                    buildid: res.data.id,
                    wjlx: 5
                };
                this.lzwyfjlist(this.lzwyform);
                // 其他列表
                this.lzqtptform = {
                    buildid: res.data.id,
                    wjlx: 6
                };
                this.lzqtptfjlist(this.lzqtptform);
            });
        }
    },
    created() {
        this.buildid = this.$route.query.id;
        let data = {
            id: this.$route.query.id
        };
        this.builddetail(data);
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.fwjgstyle .el-upload--text {
    width: auto;
    height: auto;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}
/* .detailcontent .detailitem2{
    width: 66%;
    margin-bottom: 30px;
} */
.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008a94;
}
</style>